<template>
	<view class="main" v-if="info">
		<nav-bar :title="name + '申请'"></nav-bar>
		<view class="header-bg">
			<image :src="info.top_image" mode="widthFix"></image>
		</view>
		<view class="container" v-if="status === -1">
			<view class="form-item">
				<view class="label">
					<text>
						姓名
					</text>
				</view>
				<view class="right">
					<input placeholder="请填写姓名" v-model="form.name"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>电话</text>
				</view>
				<view class="right">
					<input placeholder="请填写手机号码" v-model="form.phone" type="number" maxlength="11"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>所在地区</text>
				</view>
				<view class="right" @click="choosePo">
					<input placeholder="省市区县、乡镇等" :disabled="true" v-model="form.address"/>
					<view class="position">
						<image :src="`${STATIC_URL2}position.png`" mode="aspectFit"></image>
						定位
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>详细地址</text>
				</view>
				<view class="right">
					<input placeholder="街道、楼牌号等" v-model="form.address_detial"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>身份证号</text>
				</view>
				<view class="right">
					<input placeholder="请填写身份证号码" v-model="form.card_no" maxlength="18" type="idcard"/>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text>申请等级</text>
				</view>
				<view class="right" @click="showLevel = true">
					<input placeholder="请选择申请等级" v-model="levelName" :disabled="true"/>
					<u-icon name="arrow-right" color="#7d7d7d"></u-icon>
				</view>
			</view>
			<block v-if="type !== 1">
				<view class="form-item">
					<view class="label">
						<text>教育程度</text>
					</view>
					<view class="right">
						<input placeholder="输入教育程度" v-model="form.education"/>
					</view>
				</view>
				<view class="form-item">
					<view class="label">
						<text>公司名称</text>
					</view>
					<view class="right">
						<input placeholder="请输入公司名称" v-model="form.company"/>
					</view>
				</view>
				<view class="form-item">
					<view class="label">
						<text>主营业务</text>
					</view>
					<view class="right">
						<input placeholder="请输入主营业务" v-model="form.business"/>
					</view>
				</view>
				<view class="form-item">
					<view class="label">
						<text>营业执照</text>
					</view>
					<view class="right">
						<u-upload ref="uploader" @on-list-change="fileChange" max-count="1" :auto-upload="false"></u-upload>
					</view>
				</view>
				<view class="form-item wrap">
					<view class="label">
						<text>你申请成为我们的代理商的主要原因是什么？</text>
					</view>
					<textarea placeholder="请输入原因" maxlength="-1" v-model="form.because"></textarea>
				</view>
				<view class="form-item wrap">
					<view class="label">
						<text>你认为自己有哪些优势，可以帮助推广我们的产品和服务？</text>
					</view>
					<textarea placeholder="请输入原因" maxlength="-1" v-model="form.advantage"></textarea>
				</view>
			</block>
		</view>
		<block v-if="status === -1">
			<view class="agreement" @click="agreement = !agreement">
				<view>
					<u-icon name="checkmark-circle-fill" color="#CE7534" v-if="agreement" size="25"></u-icon>
					<view class="circle" v-else></view>
				</view>
				<view class="content">
					我已仔细阅读井同意<text class="link" @click.stop="showAgreement = true">《{{name}}服务协议》</text>，并充分阅读、理解并接受本服务协议的全部内容，一旦“同意”申请即表示您已同意遵循本服务协议的全部约定。
				</view>
			</view>
			<u-action-sheet :list="levels" v-model="showLevel" @click="setLevel"></u-action-sheet>
			<view class="confirm" @click="confirm">申请成为{{name}}</view>
			<u-modal v-model="showAgreement" :title-style="{color: 'red'}" :title="name+'服务协议'" confirm-color="#CE7534">
				<view class="slot-content" style="max-height: 500rpx;overflow-y: scroll;">
					<rich-text :nodes="info.agreement"></rich-text>
				</view>
			</u-modal>
		</block>
		<view class="hint" v-if="status === 0">
			<image :src="STATIC_URL + 'shz.png'" mode="widthFix"></image>
			<view class="title">已提交申请</view>
			<text class="msg">您的资料已提交审核中，请耐心等待…</text>
			<view class="button" @click="back">返回</view>
		</view>
		<view class="hint" v-if="status === 1">
			<image :src="STATIC_URL + 'shcg.png'" mode="widthFix"></image>
			<view class="title">审核通过</view>
			<view class="button" @click="back">返回</view>
		</view>
		<view class="hint" v-if="status === 2">
			<image :src="STATIC_URL + 'shibai.png'" mode="widthFix"></image>
			<view class="title">申请驳回</view>
			<view class="msg flex-center">
				<view style="margin-right: 10rpx;">
					<u-icon name="info-circle" color="#D81E06"></u-icon>
				</view>
				<text>{{detail.note}}</text>
			</view>
			<view class="button" @click="status = -1">重新提交</view>
		</view>
	</view>
</template>

<script>
	import {cooperationLevelListApi, cooperationApplyApi,applyInfoApi, applyListApi} from "@/api/my.js"
	import {uploadFile} from "@/utils/upload.js"
	import rules from './rules.js'
	export default {
		data() {
			return {
				type: 0,
				agreement: false,
				form: {
					type: 1,
					name: '',
					phone: '',
					address: '',
					address_detial: '',
					card_no: '',
					level_id: 1,
					education: '',
					company: '',
					business: '',
					because: '',
					advantage: '',
					business_images: ''
				},
				detail: null,
				// 可提交的状态
				status: -1,
				showLevel: false,
				levels: [],
				info: null,
				showAgreement: false
			}
		},
		onLoad() {
			let type = this.$Route.query.type || 1
			this.type = parseInt(type)
			this.form.type = this.type
			this.getLevelList()
			this.getInfo()
		},
		computed: {
			name(){
				let str = ''
				switch(this.type){
					case 1: str = '分销商'
						break;
					case 2: str = '代理商'
						break;
				}
				return str
			},
			levelName(){
				if(this.levels.length){
					let index = this.levels.findIndex(item=>item.id === this.form.level_id)
					console.log(index);
					if(index !== -1){
						return this.levels[index].text
					}else{
						return '请选择申请等级'
					}
				}else{
					return '请选择申请等级'
				}
			}
		},
		methods: {
			async confirm(){
				if(!this.agreement)return this.$utils.toast(`请阅读并勾选${this.name}申请协议`)
				let extra = ['address_detail']
				if(this.form.type === 1){
					extra.push(...['education', 'company', 'business', 'business_images', 'because', 'advantage'])
				}
				for(var key in this.form){
					if(!this.form[key]){
						if(extra.indexOf(key) === -1){
							let {name} = rules.filter(item=>item.key === key).pop()
							return this.$utils.toast(`${name}不能为空`)
						}
					}
				}
				if(this.form.phone.length !== 11)return this.$utils.toast('手机号格式错误')
				if(this.form.card_no.length !== 18)return this.$utils.toast('身份证号错误')
				let tmp = JSON.parse(JSON.stringify(this.form))
				let res = await cooperationApplyApi(tmp)
				this.$utils.toast(res.msg)
			},
			back(){
				this.$Router.back()
			},
			async getInfo(){
				let {data} = await applyInfoApi({type: this.form.type})
				this.info = data
				data = await applyListApi({type: this.form.type})
				data = data.data.list[0]
				this.status = data.status
				this.detail = data
				for(var key in this.form){
					if(data[key]){
						this.form[key] = data[key]
					}
				}
				console.log(data);
			},
			choosePo() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.form.address = res.address
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			async fileChange(e){
				if(e.length === 0){
					this.form.business_images = ''
					return
				}
				let file = e[0]
				let res = await uploadFile(file.url)
				this.form.business_images = res.code.url
			},
			async getLevelList(){
				let {data} =await cooperationLevelListApi({type: this.form.type})
				this.levels = data.map(item=>{
					return {
						...item,
						text: item.dis_name || item.agent_name
					}
				})
				if(!this.form.level_id){
					this.form.level_id = this.levels[0].id
				}
			},
			setLevel(e){
				this.form.level_id = this.levels[e].id
			}
		}
	}
</script>

<style scoped lang="scss">
.main{
	min-height: 100vh;
	background-color: #EEEFF0;
	padding-bottom: 110rpx;
	.header-bg{
		width: 100%;
		image{
			width: 100%;
		}
	}
	.container{
		border-radius: 20rpx;
		margin: 25rpx;
		margin-top: -50rpx;
		background-color: #fff;
		position: relative;
		padding-bottom: 76rpx;
		.form-item{
			padding: 40rpx 16rpx;
			@extend .flex-btw;
			border-bottom: 1px solid #EEEFF0;
			&.wrap{
				flex-direction: column;
				align-items: flex-start;
				padding:40rpx 42rpx ;
				.label{
					width: auto;
					text-align: left;
					margin-right: 0;
				}
			}
			.label{
				color: #333333;
				width: 140rpx;
				text-align: right;
				margin-right: 49rpx;
				text{
					position: relative;
					&::before{
						content: "*";
						position: absolute;
						left: -20rpx;
						top: 50%;
						transform: translateY(-35%);
						color: red;
					}
				}
			}
			.right{
				flex: 1;
				@extend .flex-btw;
			}
			.position{
				@extend .flex-center;
				color: #333333;
				font-size: 28rpx;
				white-space: nowrap;
				image{
					width: 24rpx;
					height: 28rpx;
					margin-right: 5rpx;
				}
			}
			input{
				width: 100%;
				font-size: 28rpx;
			}
			textarea{
				padding: 0;
				border: 2rpx solid #EEEFF0;
				border-radius: 15rpx;
				padding: 15rpx;
				margin-top: 46rpx;
				font-size: 28rpx;
			}
		}
	}
	.agreement{
		display: flex;
		margin: 40rpx 50rpx;
		.circle{
			width: 25rpx;
			height: 25rpx;
			border-radius: 50%;
			border: 2rpx solid rgba(#999999, .5);
			margin-top: 8rpx;
		}
		.content{
			 flex: 1;
			 margin-left: 10rpx;
			 font-size: 24rpx;
			 color: #999999;
		}
	}
	.confirm{
		margin: 0 35rpx;
		@extend .flex-center;
		padding: 24rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		box-sizing: border-box;
		color: #fff;
		background: linear-gradient(to right, #FFBC67, #FC602B);
		border-radius: 50rpx;
	}
	.upload-img{
		display: flex;
		flex-direction: column;
		align-items: center;
		image{
			height: 154rpx;
			margin-bottom: 5rpx;
		}
		font-size: 20rpx;
	}
	.link{
		color: $uni-color-primary;
	}
	.hint{
		@extend .flex-center;
		flex-direction: column;
		image{
			width: 210rpx;
		}
		.title{
			font-size: 38rpx;
			font-weight: bold;
			margin: 38rpx 0;
		}
		.msg{
			font-size: 28rpx;
			color: #666666;
		}
		.button{
			height: 80rpx;
			width: 288rpx;
			@extend .flex-center;
			background-color: $primary-color;
			border-radius: 50rpx;
			color: #FFF;
			margin-top: 150rpx;
		}
	}
}
.slot-content{
	padding: 20rpx;
}
</style>
